<template>
  <view class="container">
    <view 
      class="box red-box" 
      :class="{ 'move-right': isSwitchRankings }"
    >
      <view class="showComprehensiveList">
        <image class="iconfont icon-paihb img"></image>
        <view class="content">
          <image 
            v-if="!isSwitchRankings" 
            class="iconfont icon-a-15zonghebang contentImg" 
          ></image>
          <image 
            v-else 
            class="iconfont icon-zuozhebang contentImg"
          ></image>
          <text class="text">{{ isSwitchRankings ? '作者榜' : '综合榜' }}</text>
        </view>
      </view>
    </view>
    
    <view 
      class="box green-box" 
      @click="swapRankings"
      :class="{ 'move-left': isSwitchRankings }"
    >
      <view class="showAuthorList"> 
        <image
          v-if="isSwitchRankings" 
          class="iconfont icon-a-15zonghebang img" 
        ></image>
        <image 
          v-else 
          class="iconfont icon-zuozhebang img"
        ></image>
        <text class="text">{{ !isSwitchRankings ? '作者榜' : '综合榜' }}</text>
      </view>
    </view>
  </view>
</template>
<script>
	import { mapState, mapActions } from 'vuex';
export default {
	name:'ranling-list-header-xhd',
  data() {
    return {
    };
  },
  methods: {
    ...mapActions(['toggleRankings']), // 从 Vuex store 中获取 toggleRankings 方法
     swapRankings() {
      this.toggleRankings(); // 调用 Vuex 的方法切换状态
    },
  },
  computed: {
    ...mapState(['isSwitchRankings']), // 从 Vuex store 中获取 isSwitchRankings 状态
  },
};
</script>

<style lang="scss">
.container {
  display: flex;
  width: 100%;
  height: 100rpx;
  position: relative; /* 确保盒子在同一行 */
  align-items: center;
  //background: linear-gradient(to right, #f0f0f0, #d9d9d9); /* Background gradient */
  border-radius: 15rpx; /* Rounded corners */
}

.box {
  border-radius: 15rpx; /* Rounded corners */
  height: 100rpx;
  position: absolute; /* 使用绝对定位 */
  transition: left 0.5s ease; /* 添加动画效果 */
  background-color:gold;
  .showComprehensiveList{
	  height: 80rpx;
	  margin: 10rpx;
	  display: flex; /* 使用 Flexbox */
	  justify-content: center; /* 水平居中 */
	  align-items: center; /* 垂直居中 */
	  font-size: 24rpx; /* 文字大小 */
	  color: black; /* 文字颜色 */
	  border-radius: 10rpx; /* 圆角 */
	  //background-color: green;
	  .img{
		  position: absolute;
		  height: 60rpx;
		  width: 150rpx;
		  left: 20rpx;
		  line-height: 60rpx;
	  }
	  .content{
		  
		  display: flex;
		  align-items: center;
		  .contentImg{
			color: #e0620d;
			text-align: center;
			line-height: 50rpx;
		  	width: 50rpx;
		  	height: 50rpx;
			font-size: 35rpx; 
		  }
		  .text{
			 font-size: 30rpx; 
			 color: #000;
		  }  
	  }  
  }
}
.red-box {
  //background-color: red;
  width: 70%; /* 红盒子占 70% */
  left: 0; /* 初始位置 */
}

.green-box {
	height: 80rpx;
	background-color: gainsboro;
	width: 30%; /* 绿盒子占 30% */
	left: 70%; /* 初始位置 */
	display: flex;
	align-items: center;
	justify-content: center;
  .showAuthorList{
  	  display: flex;
  	  align-items: center;
  	  .img{
  		  //color: #e0620d;
  		  text-align: center;
  		  line-height: 50rpx;
  		  width: 50rpx;
  		  height: 50rpx;
  		  font-size: 35rpx;
  	  }
  	  .text{
  		  font-size: 30rpx;
  		  color: #000;
  	  }
  }
}

.move-left {
left: 0;
}

.move-right {
	left: 30%;
}
</style>

